<template>
	<view class="container">
		<view class="f-wrap u-p-30">
			<u-form ref="uForm" >
				<u-form-item label="文章分类" label-width="auto" >
					<u-input input-align="right" v-model="name" @click="show = true" placeholder="请选择" type="select" />
				</u-form-item>
				<u-form-item label="文章标题" label-width="auto" >
					<u-input input-align="right" v-model="title" placeholder="请填写文章标题" />
				</u-form-item>
				<u-form-item label="作者" label-width="auto">
					<u-input input-align="right" v-model="author" placeholder="请填写作者"></u-input>
				</u-form-item>
				<u-form-item label="缩略图" label-width="auto" label-position="top">
					<view class="img-box">
						<u-upload :showProgress="false" @on-uploaded="uploadSuccess" @on-remove="uploadRemove"
							:action="`${$API_URL}index/upload`" width="140" height="140" maxCount="1"></u-upload>
					</view>
				</u-form-item>
				<!-- #ifdef MP-WEIXIN || H5 || APP-PLUS -->
				<u-form-item label="文章内容" label-position="top" >
					<shopro-editor v-model="content" :html="content.html"></shopro-editor>
				</u-form-item>
				<!-- #endif -->
			</u-form>
		</view>
		<!-- 分类选择器 -->
		<u-select v-model="show" value-name='id' label-name='name' mode="single-column" :list="cateList"
			@confirm="confirm"></u-select>
		<!--提交按钮-->
		<view class="f-fixed u-padding-20">
			<u-button @click="addNewsadd" shape="circle" type="primary">发布</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				categoryID: 0, //分类id
				cateList: [],
				title: '', //文章标题
				name: '', //分类名称
				author:'', //作者
				show: false,
				image: [], //图片
				imgList: [], //图片
				content:'',
				category_ids: '', //文章分类
			};
		},
		computed: {},

		onLoad() {
			this.getCategory();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		props: {
			categoryStyleId: {
				//分类样式ID
				type: Number,
				default: 1
			}
		},
		methods: {
			getCategory() {
				this.$http('newscategory.detail', {
					id: this.categoryStyleId
				}).then(res => {
					if (res.code === 1) {
						this.cateList = res.data.children;
						this.categoryID = res.data.children[0].id;
					}
				});
			},
			confirm(e) {
				this.category_ids = e[0].value;
				this.name = e[0].label;
			},
			// 上传图片成功
			uploadSuccess(e) {
				this.image = [];
				e.forEach(item => {
					this.image.push(item.response.data.url);
				});
			},

			// 移除图片
			uploadRemove(index) {
				this.image.splice(index, 1);
			},
			addNewsadd() {
				let that = this;
				let formData = {
					id: that.id,
					title: that.title,
					author: that.author,
					category_ids: that.category_ids,
					content: that.content,
					image: that.image,
				};
				
				
				that.$http('user.newsAdd', formData, '提交中...').then(res => {
					uni.hideKeyboard();
					if (res.code === 1) {
						that.$u.toast('提交成功');
						that.$Router.back();
					}
				});
			},
	

			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			}
		}
	};
</script>


<style>
</style>
